<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title></title>
    <link rel="stylesheet" href="layui/css/layui.css">
</head>
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
<script src="layui/layui.js"></script>
<style>
    #h1 {
        margin-top: 50px;
    }

    center {
        text-align: center;
        font-size: 35px;
        font-weight: bold;
        color: #0000FF;
    }
</style>
<body>

<div class="layui-container" id="h1">
    <!--<div class="layui-fluid">-->
    <div class="layui-row">
        <div class="layui-col-sm12 layui-col-md12 layui-col-lg12">
            <table id="demo" lay-filter="test">
                <tr>
                    <td>选择：<select>
                        <option>--选择--</option>
                        <option>java</option>
                        <option>Web</option>
                    </select>
                    </td>
                    <center>电子文档</center>
                    </td>
                    <td><a href="add.html" class="layui-btn">添加文档</a>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</div>
</body>

<script>
    // 必须要导入 table模块 layui.use('table',...)
    layui.use('table', function () {
        var table = layui.table;
        // 为表格填充数据
        table.render({
            elem: '#demo'
            , toolbar: true//开启工具栏
            , height: 312 
            , url: 'http://localhost:8080/file/findAll' //获取数据
            //,page: true //开启分页
            , cols: [[ //表头
                {field: 'id', width: 100, title: '书籍ID', sort: true}
                , {field: 'filename', width: 200, title: '书籍名'}
                , {field: 'digest', width: 245, title: '摘要', sort: true}
                , {field: 'username', width: 100, title: '作者'} //没定义宽度则占满剩余所有宽度，都不定义则所有列均分
                , {field: 'date', width: 120, title: '日期', sort: true,}
                , {field: "right", title: "操作", toolbar: '#barDemo'}
            ]]
            , page: {
                limit: 1//每页显示1条（ 向后台传值，每页显示条数 ）
                , limits: [1, 2, 3] //可选每页条数
                , first: '首页' //首页显示文字，默认显示页号
                , last: '尾页'
                , prev: '<em>←</em>' //上一页显示内容，默认显示 > <
                , next: '<i class="layui-icon layui-icon-next"></i>'
                , layout: ['prev', 'page', 'next', 'count', 'limit', 'skip', 'refresh'] //自定义分页布局
            },
        });

        //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
        table.on('tool(test)', function (obj) {
            var data = obj.data; //获得当前行数据
            //layer.msg(JSON.stringify(data));
            //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var layEvent = obj.event;
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
            if (layEvent === 'del') { //删除
                layer.confirm('真的删除行么', function (index) {
                    // 向服务端发送删除请求
                    // 此处可以发送ajax
                    //$.ajax()
                    $.ajax({
                        type: "POST",
                        url: "file/delete",
                        //data: "name="+$nameValue,
                        data: data,
                        // success: function (backdata) {
                        //     alert("服务器返回的User: " + backdata);
                        //     alert("服务器返回的User的id: " + backdata.id);
                        //     alert("服务器返回的User的name: " + backdata.name);
                        // }
                    });
                    obj.del(); //删除对应行（tr）的DOM结构
                    layer.close(index);
                });
            } else if (layEvent === 'edit') { //编辑
                // 向服务端发送更新请求
                // 向发送Ajax请求...
                // $.ajax({
                //     type: "POST",
                //     url: "file/findById?id ="+data.id,
                //     //data: "name="+$nameValue,
                //     data: data,
                // });
                window.location.href = "/file/findById?id="+data.id;
                // 同步更新缓存对应的值
                // obj.update({
                //     username: 'shine001',
                //     city: '北京',
                //     sex: '女',
                //     score: 99
                // });
            }
        });

    });
</script>

<!-- 如下script可以定义在页面的任何位置 -->
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

</html>